<!Doctype html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="index.css">-->
<style>
#header,#center{
	width:100%;
}

#header{
	border:1px solid red;
	display:inline-block;
}
.c_left{
	float:left;
	width:15%;
	height:530px;
	border:1px solid black;
	
}
.c_right{
	float:left;
	width:84%;
	height:530px;
	border:1px solid blue;
	
}

#header ul li{
				float: left;
				font-size: 30px;
				display: inline-block;
			  
				background:black;
				height:120px;
				}


			.one:hover{}
            .two:hover{color:greenyellow;}
            .three:hover{font-style:italic;}
            .four:hover{background-color:pink;}
            .five:hover{font-family:Serif;}
            
            .one{
            position:relative;
           display:inline-block;
}

            .game{
            display:none;
            position: absolute;
			top:53px;
            background-color:aquamarine;
            min-width:120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
            padding: 10px 12px;
			z-index:1000;
  }
  .one:hover .game{display:block;}
            
           .two{
            	position: relative;
           
            }
            .news{
            	display: none;
            	position: absolute;
				top:53px;
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px;
				z-index:1000;
            }
            .two:hover .news{
            	display: block;
            }
	
	        .three{
			position:relative;
			}
			.picture{
			display:none;
			position:absolute;
			top:53px;
			background:pink;
			min-width:120px;
			box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
			padding:10px 12px;
			z-index:1000;
			}
			.three:hover .picture{
			display:block;
			}
			 .four{
            	position: relative;
           
            }
            .shopping{
            	display: none;
            	position: absolute;
				top:53px;
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px;
				z-index:1000;
            }
            .four:hover .shopping{
            	display: block;
            }
			 .five{
            	position: relative;
           
            }
            .vedio{
            	display: none;
            	position: absolute;
				top:53px;
            	background:cyan;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .five:hover .vedio{
            	display: block;
            }
			
			 ul{
      list-style-type:none;
      }
    .c_left ul li a{
          
	  a:link,a:visited
      display:block;
      font-weight:bold;
      color:white;
      background-color:green;
      width:120px;
      text-align:center;
      padding:4px;
     }
	
     a:hover,a:active
    {
    background-color:orange;
    }
			
            .one_1{
            display:block;
}

            .game_v{
            display:none;
            
            background-color:aquamarine;
            min-width:120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
            padding: 10px 12px;
			z-index:1;
  }
  .one_1:hover .game_v{display:block;}
            
         
            .news_v{
            	display: none;
            	position:relative;
				
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .two_2:hover .news_v{
            	display: block;
            }
	
	        
			.picture_v{
			display:none;
			position:relative;
			
			background:pink;
			mid-width:120px;
			box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
			padding:10px 12px;
			z-index:1000;
			}
			.three_3:hover .picture_v{
			display:block;
			}
			 
            .shopping_v{
            	display: none;
            	position:relative;
				
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .four_4:hover .shopping_v{
            	display: block;
            }
			 
            .vedio_v{
            	display: none;
            	position:relative;
				
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .five_5:hover .vedio_v{
            	display: block;
            }
			.ulstyle li{
			width:120px;
			}
.ulstyle li a{
width:60px;
}
		
		.li_style li
		{
		width:20%;
		}
		.gameli
		{
		widith:100%;
		}
	.game li{
	width:100%;
	}
	.news li{
	width:100%;
	}
	.picture li{
	width:100%;
	}
	.shopping li{
	width:100%;
	}
	.vedio li{
	width:100%;
	}
	
</style>
</head>
<body>
<div id="header">

<ul class="li_style">
	
    <li class="one"><a href="#">游戏</a>
	<ul class="game">
	<li><a href="#">LOL</a></li>
	<li><a href="#">绝地求生</a></li>
	</ul>
	</li>
	
	
	
	
	<li class="two"><a href="#">资讯</a>
	<ul  class="news">
	<li><a href="#">世界杯</a></li>
	<li><a href="#">财经新闻</a></li>
	</ul>
	</li>
	
	
	
	<li class="three"><a href="#" >图片</a>
	<ul class="picture">
	<li><a href="#">美食</a></li>
	<li><a href="#">旅游</a></li>
	</ul>
	</li>
	
	
	<li class="four"><a href="#" >购物</a>
	<ul class="shopping">
	<li><a href="#">电器商品</a></li>
	<li><a href="#">奢侈品</a></li>
	</ul>
	</li>
	
	<li class="five"><a href="#" >视频</a>
	<ul class="vedio">
	<li><a href="#">腾讯视频</a></li>
	<li><a href="#">优酷视频</a></li>
	</ul>
	</li>
</ul>


</div>


<div class="center">
<div class="c_left">
<ul class="ulstyle">
			<li class="one_1"><a href="#">游戏</a>
			<ul class="game_v">
	        <li>LOL</li>
	        <li>绝地求生</li>
	        </ul>
			</li>
			
			<li class="two_2"><a href="#">资讯</a>
			<ul class="news_v">
	        <li>世界杯</li>
	        <li>财经新闻</li>
	        </ul>
			</li>
			
			<li class="three_3"><a href="#">图片</a>
			<ul class="picture_v">
	        <li>美食</li>
	        <li>旅游</li>
	        </ul>
			</li>
			
			<li class="four_4"><a href="#">购物</a>
			<ul class="shopping_v">
	        <li>电器商品</li>
	        <li>奢侈品</li>
	        </div>
			</li>
			
			<li class="five_5"><a href="#">视频</a>
			<ul class="vedio_v">
	        <li>腾讯视频</li>
	        <li>优酷视频</li>
	        </ul>
			</li>
		</ul>
</div>
<div class="c_right">center-right</div>
</div>

</body>
</html>